<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icon :iconUrl="iconUrl"></home-icon>
    <home-position></home-position>
    <activity></activity>
    <hot-attractions :attractions="attractions"></hot-attractions>
    <you-like :loveList="loveList"></you-like>
    <vaction-list :tripList="tripList"></vaction-list>
    <footer-bottom></footer-bottom>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HomeHeader from '../components/home/header'
import HomeSwiper from '../components/home/home-Swiper'
import HomeIcon from '../components/home/home-icon'
import HomePosition from '../components/home/home-position'
import Activity from '../components/home/activity'
import HotAttractions from '../components/home/hot-attractions'
import YouLike from '../components/home/you-like'
import VactionList from '../components/home/vaction'
import FooterBottom from '../components/comoon/footer'
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcon,
    HomePosition,
    Activity,
    HotAttractions,
    YouLike,
    VactionList,
    FooterBottom
  },
  data() {
    return {
      swiperList: [],
      iconUrl: [],
      attractions: [],
      tripList: [],
      loveList: [],
      // 优化
      changeCity: ''
    }
  },
  computed: {
    ...mapState(['cityName'])
  },
  methods: {
    getDataHttp() {
      this.$http.get('/api/dataHome.json').then(res => {
        const data = res.data.data
        data.forEach(item => {
          if (item.city === this.cityName) {
            this.swiperList = item.swiperList
            this.iconUrl = item.iconUrl
            this.attractions = item.attractions
            this.tripList = item.tripList
            this.loveList = item.loveList
          }
        })
      })
    }
  },
  mounted() {
    this.changeCity = this.cityName
    this.getDataHttp()
  },
  // activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
  activated() {
    if (this.changeCity !== this.cityName) {
      this.getDataHttp()
      this.changeCity = this.cityName
    }
  }
}
</script>

<style lang="less" scoped></style>
